<template>
  <div class="sourceLayer" :class="{'is-min': isMax === false}">
    <div class="title font12 dipgray">
      <!--文件默认不可以被下载，上传完成后可点击...来修改下载权限-->
      上传文件列表
      <div class="funcs">
        <span class="max" @click="maximize" v-show="isMax === false"></span>
        <span class="min" @click="minimize" v-show="isMax === true"></span>
        <span class="layerClose" @click="closeSelf"></span>
      </div>
    </div>
    <ul class="upLoadList">
      <li class="clearfix" v-for="item, index in objUploadQueue">
        <a class="name fl elips" href="javascript:;">
          <img alt="" :src="item.iconSrc"/>
          {{item.fileName}}
        </a>
        <p class="fl processBox">
          <span class="font12 dipgray" style="width: 40px;">{{item.fileSizeStr}}</span>
          <span class="process">
            <ins class="passed" :style="{width: item.percentage + '%'}"></ins>
          </span>
          <span class="font12 dipgray">
            {{item.percentage === 0 ? '上传中' : item.percentage === 100 ? '上传成功' : item.percentage === -1 ? '上传出错' : item.percentage + '%'}}
          </span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex';
  export default {
    name: "uploadQueue",
    props: {
    },
    data(){
      return {

      }
    },
    computed: {
      ...mapState({
        objUploadQueue: state => state.objUploadQueue,
        isMax: state => state.maxUploadQueue
      })
    },
    methods: {
      ...mapMutations(['toggleUploadQueuePop', 'maxMinUploadQueue']),
      /**
       * 最大化
       */
      maximize(){
        this.maxMinUploadQueue("max");
      },
      /**
       * 最小化
       */
      minimize(){
        this.maxMinUploadQueue("min");
      },
      /**
       * 关闭
       */
      closeSelf(){
        this.toggleUploadQueuePop(false);
      }
    }
  }
</script>

<style scoped>
  @import "../../../assets/css/uploadQueue.css";
  .is-min {
    width: 190px;
    height: 28px;
    overflow: hidden;
  }
</style>
